<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<style >
		*{
			margin: 0px;
			padding: 0px;
		}
		body{
			background:#D2D2D2;
			position: absolute;
		}
		.cen{
			width: 500px;
			height: 500px;
			
			margin-top:30px ;
			background: white;
			position: absolute;
			left: 400px;
		}
		.green1{
			width: 96px;
			height: 96px;
		 background: #66ce00;
		border-radius: 10px;
		position: absolute;
				left: 100px;
		}
		.green1:hover{
			background: #97fc2c;
		}
		.green2:hover{
			background: #97fc2c;
		}
		.green3:hover{
			background: #97fc2c;
		}
		.green4:hover{
			background: #97fc2c;
		}
		.green5:hover{
			background: #97fc2c;
		}
		.green6:hover{
			background: #97fc2c;
		}
		.green7:hover{
			background: #97fc2c;
		}
		.green2{
			width: 96px;
			height: 96px;
		 background: #66ce00;
		border-radius: 10px;
		position: absolute;
				left: 200px;
		}
		.green3{
			width: 96px;
			height: 96px;
		 background: #66ce00;
		border-radius: 10px;
		position: absolute;
				left: 300px;
		}
		.green4{
			width: 96px;
			height: 96px;
		 background: #66ce00;
		border-radius: 10px;
		position: absolute;
				left: 200px;
				top: 100px;
		}
		.green5{
			width: 96px;
			height: 96px;
		 background: #66ce00;
		border-radius: 10px;
		position: absolute;
				left: 200px;
				top: 200px;
		}
		.green6{
			width: 96px;
			height: 96px;
		 background: #66ce00;
		border-radius: 10px;
		position: absolute;
				left: 400px;
				top: 300px;
		}
		.green7{
			width: 96px;
			height: 96px;
		 background: #66ce00;
		border-radius: 10px;
		position: absolute;
				left: 100px;
				top: 400px;
		}
		.zi1{
			width: 96px;
			height: 96px;
		 background: #8168ea;
		border-radius: 10px;
		position: absolute;
				left: 300px;
				top: 400px;
		}
		.zi1:hover{
			background: #a089ff;
		}
		.zi2:hover{
			background: #a089ff;
		}
		.zi2{
			width: 96px;
			height: 96px;
		 background: #8168ea;
		border-radius: 10px;
		position: absolute;
		 top: 200px;
		}
		.yellow1{
			width: 96px;
			height: 96px;
		 background: #face47;
		border-radius: 10px;
		position: absolute;
		left: 100px;
		top: 300px;
		}
		.yellow1:hover{
			background: #ffdf7d;
		}
		.yellow2:hover{
			background: #ffdf7d;
		}
		.yellow2{
			width: 96px;
			height: 96px;
		 background: #face47;
		border-radius: 10px;
		position: absolute;
		left: 400px;
		top: 200px;
		}
		.blue1{
			width: 96px;
			height: 96px;
		 background: #1ec0ff;
		border-radius: 10px;
		position: absolute;
		top: 400px;
		border-bottom-left-radius: 50px;
		}
		.blue2{
			width: 96px;
			height: 96px;
		 background: #1ec0ff;
		border-radius: 10px;
		position: absolute;
		left: 300px;
		top: 300px;
		}
		.blue2:hover{
			background: #6dd6ff;
		}
		.blue1:hover{
			background: #6dd6ff;
		}
		.pink1{
			width: 96px;
			height: 96px;
		 background: #e86a80;
		border-radius: 10px;
		position: absolute;
	
		top:300px;
		}
		.pink1:hover{
			background: #ff7c93;
		}
		.pink2:hover{
			background: #ff7c93;
		}
		.pink2{
			width: 96px;
			height: 96px;
		 background: #e86a80;
		border-radius: 10px;
		position: absolute;
		left: 400px;
		top: 400px;
		border-bottom-right-radius: 50px;

		}
	</style>
	</head>
	<body>
		<div class="cen">
	 	  <a href="#"> <div class="green1"></div></a>
		  <a href="#"> <div class="green2"></div></a>
		  <a href="#"> <div class="green3"></div></a>
		  <a href="#"> <div class="green4"></div></a>
		  <a href="#"> <div class="green5"></div></a>
		  <a href="#"> <div class="green6"></div></a>
		  <a href="#"> <div class="green7"></div></a>
		  <a href="#"> <div class="zi1"></div></a>
		  <a href="#"> <div class="zi2"></div></a>
		  <a href="#"> <div class="yellow1"></div></a>
		  <a href="#"> <div class="yellow2"></div></a>
		  <a href="#"> <div class="blue1"></div></a>
		  <a href="#"> <div class="blue2"></div></a>
		  <a href="#"> <div class="pink1"></div></a>
		  <a href="#"> <div class="pink2"></div></a>
		</div>
	</body>
</html>
